import AgentReChangeSetting from '@/pages/Users/components/AgentReChangeSetting';
import FinanceSetting from '@/pages/Users/components/FinanceSetting';
import UserSetting from '@/pages/Users/components/UserSetting';
import { findById } from '@/services/users';
import {
  GoldTwoTone,
  SafetyCertificateTwoTone,
  ScheduleTwoTone,
} from '@ant-design/icons';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import { ProCardTabsProps } from '@ant-design/pro-card/lib';
import { PageHeader } from '@ant-design/pro-components';
import { useRequest } from 'ahooks';
import { Avatar } from 'antd';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import UserInfo from './components/UserInfo';
interface Props {
  params: {
    userId: string;
  };
}

const Show: React.FC<any> = () => {
  const [tab, setTab] = useState('tab1');
  const [tabPosition, setTabPosition] =
    useState<ProCardTabsProps['tabPosition']>('left');
  const params = useParams();
  const { data, loading, error, run } = useRequest(findById, { manual: true });

  useEffect(() => {
    if (params?.userId) {
      run(params.userId);
    }
  }, [params, run]);
  return (
    <>
      <ProCard
        style={{ height: '80vh' }}
        loading={loading}
        title={
          <PageHeader
            onBack={() => window.history.back()}
            title={
              <StatisticCard
                statistic={{
                  title: data?.name,
                  value: data?.balance,
                  suffix: '￥',
                  precision: 2,
                  valueStyle: {
                    color: '#ba040a',
                  },
                  icon: <Avatar size={68} src={data?.avatar} />,
                }}
              />
            }
            subTitle={data?.name}
          />
        }
        tabs={{
          tabPosition,
          activeKey: tab,
          width: 200,
          items: [
            {
              label: `基本信息`,
              key: 'tab1',
              icon: <ScheduleTwoTone />,
              children: <UserInfo user={data} />,
            },
            {
              label: `安全设置`,
              key: 'tab2',
              icon: <SafetyCertificateTwoTone />,
              children: <UserSetting user={data} />,
            },
            {
              label: `财务设置`,
              key: 'tab3',
              icon: <GoldTwoTone />,
              children: <FinanceSetting user={data} />,
            },
            {
              label: `等级/关系变动记录`,
              key: 'tab4',
              icon: <GoldTwoTone />,
              children: <AgentReChangeSetting user={data} />,
            },
          ],
          onChange: (key: React.SetStateAction<string>) => {
            setTab(key);
          },
        }}
      />
    </>
  );
};
export default Show;
